<template>
  <div>
    <div id="catChart" :style="{ width: '1400px', height: '400px' }">
    </div>
    <div id="myChart" :style="{ width: '1400px', height: '400px' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data () {
    return {
      msg: 'Welcome use Echarts'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let catChart = this.$echarts.init(document.getElementById('catChart'))
      this.$http.all([
        this.$http({
          method: 'get',
          url: '/userFlow/cateMontChart',
          headers: {
            'Authorization': sessionStorage.getItem('token')
          }
        }),
        this.$http({
          method: 'get',
          url: '/userFlow/categoryChart',
          headers: {
            'Authorization': sessionStorage.getItem('token')
          }
        }),
        this.$http({
          method: 'get',
          url: '/userFlow/yaerChart',
          headers: {
            'Authorization': sessionStorage.getItem('token')
          }
        })
      ]).then(
        this.$http.spread(function (acct, perms, yearRes) {
          let serData = []
          let catexAxisData = []
          let cateData = []
          let yearData = []
          let yearDatas = []
          let cateMontList = acct.data.data.chartData
          let catelist = perms.data.data
          let yearList = yearRes.data.data
          console.info(yearList)
          for (let i = 0; i < catelist.length; i++) {
            catexAxisData.push({ name: catelist[i].remark, value: +catelist[i].price })
            cateData.push(catelist[i].remark)
          }
          for (let i = 0; i < yearList.length; i++) {
            yearData.push({ name: yearList[i].year_time, value: +yearList[i].price })
            yearDatas.push(yearList[i].year_time)
          }

          for (let i = 0; i < cateMontList.length; i++) {
            serData.push(

              {
                name: cateMontList[i].cateName,
                type: 'line',
                stack: '总量',
                data: cateMontList[i].price
              }
            )
          }
          console.info(catexAxisData)
          // 绘制图表
          myChart.setOption({
            title: {
              text: '按月消费'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: acct.data.data.cateNames
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: acct.data.data.monts,
              axisLabel: {
                interval: 0,
                rotate: 45
              }
            },
            yAxis: {
              type: 'value'
            },
            series: serData,
            color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF']
          })
          catChart.setOption({
              title: [{
                text: '消费方式饼图',
                x: '62%'
              },
              {
                text: '年度消费总额',
                x: '16%'
              }],
              tooltip: {
                trigger: 'item'
              },
              legend: [{
                orient: 'vertical',
                y: '15%',
                x: 'right',
                data: cateData
              },
              {
                orient: 'vertical',
                y: '15%',
                x: 'left',
                data: yearDatas
              },

              ],
              series: [
                {
                  //name: '金额',
                  type: 'pie',
                  radius: '65%',
                  data: catexAxisData,
                  color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
                  center: ['65%', '50%']
                },
                {
                  //name: '金额',
                  type: 'pie',
                  radius: '70%',
                  data: yearData,
                  color: ['#FFDB5C', '#ff9f7f', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
                  center: ['20%', '50%']
                }
              ]
            })
        }))
    }
  }
}
</script>

<style>

</style>
